<script setup>
import { usePlayerStore } from '@/stores'
import { usePlayerFlyout } from '@/hooks'

const playerStore = usePlayerStore()

const playbackRates = [
  {
    label: '2.0x',
    value: 2
  },
  {
    label: '1.5x',
    value: 1.5
  },
  {
    label: '1.25x',
    value: 1.25
  },
  {
    label: '1.0x',
    value: 1
  },
  {
    label: '0.75x',
    value: 0.75
  },
  {
    label: '0.5x',
    value: 0.5
  }
]

const containerRef = ref()

const { mouseenter, mouseleave, clearTimer } = usePlayerFlyout(containerRef)

function handleClick(speed) {
  clearTimer(true)
  playerStore.changePlaybackrate(speed)
}
</script>

<template>
  <div
    ref="containerRef"
    class="relative"
    @mouseenter="mouseenter"
    @mouseleave="mouseleave"
  >
    <button
      class="relative mr-0.5 inline-flex h-10 cursor-pointer items-center justify-center rounded-md px-2 text-sm outline-none transition-colors duration-200 hover:opacity-60"
    >
      {{
        playerStore.playbackRate === 1
          ? '倍速'
          : playbackRates.find(item => item.value === playerStore.playbackRate)
              .label
      }}
    </button>

    <ul
      class="flyout absolute bottom-16 hidden w-16 overflow-hidden rounded bg-black/50 text-center text-sm"
    >
      <li
        v-for="item in playbackRates"
        :key="item.value"
        class="cursor-pointer px-3 py-2 hover:bg-white/10"
        :class="playerStore.playbackRate === item.value ? 'text-primary' : ''"
        @click="handleClick(item.value)"
      >
        {{ item.label }}
      </li>
    </ul>
  </div>
</template>

<style scoped>
.player-flyout-show .flyout {
  display: block;
}
</style>
